@import "../../../../grid";

@font-face {
  font-family: 'Open Sans';
  src: url('../../../fonts/google/OpenSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('../../../fonts/google/Lato.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

$template-name: set8-small;

$font-family: 'Lato', sans-serif;
$custom-font-family: 'Open Sans', sans-serif;

$color-pallete: (
  // Color Name : (Border color | Quotes color | Title Color | Background color | Text color)
        'black': (#d1d1d1, #ececec, #333, #f7f7f7, #666666),
        'blue': (#c1d1f0, #dfe5f5, #333, #f5f7fc, #666666),
        'green': (#cedebd, #ebf1e3, #333, #f7f9f4, #666666),
        'orange': (#eae0b5, #f7f2e0, #333, #fcfaf3, #666666),
        'purple': (#c9b8d3, #e8e1ed, #333, #f6f3f8, #666666),
        'red': (#f1b9b9, #f9e1e1, #333, #fdf3f3, #666666),
        'teal': (#bdd7dd, #e3eef1, #333, #f4f8f9, #666666),
        'white': (#afafaf, #f0f0f0, #fff, #ffffff, #fff)
);

$font-size: 18px;
$font-style: italic;
$font-weight: 400;
$font-line-height: 27px;

.tvo-set8-small-template {
  &.tvo-testimonials-display-grid {
    .tvo-testimonial-display-item {
      position: relative;

      .tvo-testimonial-message-box {
        margin: 10px 10px;
        padding: 35px 30px;
        display: block;
        position: relative;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

        &::after {
          content: '';
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid;
          position: absolute;
          top: 100%;
          right: 38px;
        }

        h4 {
          font-family: $font-family;
          font-size: 18px;
          font-weight: 700;
          line-height: 30px;
          text-transform: uppercase;
          margin-top: 0;
        }

        .tvo-testimonial-quote {
          max-height: 55px;

          &::before {
            display: block;
            content: '“';
            font-family: Georgia, sans-serif;
            font-size: 100px;
            font-weight: 700;
            line-height: 1em;
            width: 40px;
          }
        }

        p {
          &.tvo-testimonial-text {
            font-size: $font-size;
            font-weight: $font-weight;
            font-family: $font-family;
            font-style: $font-style;
            line-height: $font-line-height;
            margin-bottom: 0;
          }

          margin: 0;
          padding: 0;
        }
      }

      .tvo-testimonial-info-wrapper {
        margin-top: 20px;

        .tvo-testimonial-image-cover {
          display: inline-block;
          float: right;
          border-radius: 50%;
          width: 85px;
          height: 85px;
          margin-right: 15px;
        }

        .tvo-testimonial-info {
          display: inline-block;
          float: right;
          font-family: $custom-font-family;
          border: 1px solid transparent;

          .tvo-testimonial-name {
            font-size: 18px;
            display: block;
            float: right;
            margin-right: 10px;
            margin-top: 15px;
            font-weight: 400;
          }

          .tvo-testimonial-role {
            font-size: 14px;
            display: block;
            float: right;
            margin-right: 10px;
            line-height: 1em;
          }
        }
      }
    }
  }
}

@each $name, $color in $color-pallete {
  .tvo-set8-small-template {
    &.tve_#{$name} {
      .tvo-testimonial-display-item {
        .tvo-testimonial-message-box {
          box-shadow: 0 3px 0 0 nth($color, 1);

          &::after {
            border-top-color: nth($color, 1);
          }

          background-color: nth($color, 4);

          h4 {
            color: nth($color, 3);
          }

          p {
            color: nth($color, 5);
          }

          .tvo-testimonial-quote {
            &::before {
              //color: nth($color, 2);
              /* SUPP-6422 - can't edit quote color after applying color on :before */
              color: inherit;
            }
          }
        }
      }

      .tvo-testimonial-info-wrapper {
        .tvo-testimonial-info {
          .tvo-testimonial-name {
            color: nth($color, 3);
          }

          .tvo-testimonial-role {
            color: nth($color, 5);

            a {
              color: inherit;
            }
          }
        }
      }
    }
  }
}
